<template>
	<view class="vehicle">
		<view class="top">
			<view class="left">
				<u-icon name="car" :size="30" color="rgb(94,94,94)"></u-icon>
				<view class="car-type">{{order.carCode}}</view>
				<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
			</view>
			<view class="right" v-if="order.stateVehicle">车辆: {{order.stateVehicle | statusVehicleFilter}}</view>
			<view class="right">运力状态: {{order.state | statusOrderFilter}}</view>
		</view>
		<u-line class="u-line" border-style="solid" color="#584d56" :hair-line="true"/>
		<view class="order-item">
			<view class="left" v-if="order.carUrl">
				<image :src="order.carUrl" mode="aspectFit"></image>
			</view>
			<view class="left" v-else style="display: flex;flex-direction: column;">
				<view class="title-contact">联系人: {{order.customerName}}</view>
				<view class="title-contact">货物类型：{{order.typeName}}</view>
				<view class="title-contact">备注信息：{{order.orderRemarks}}</view>
			</view>
			<view class="content">
				<view class="title u-line-2"> {{order.orderTitle}} </view>
				<view class="title u-line-2" v-if="order.loadCapacity"> 载重量 {{order.loadCapacity}} 吨</view>
				<view class="title u-line-2" v-if="order.loadCapacity"> 容量体积 {{order.volumeCapacity}} m³</view>
				<view class="driver-name">驾驶员 {{order.driverName}}</view>
				<view class="create-time">{{order.createDate}}</view>
			</view>
		</view>
		<view class="total">
			期望回报
			<text class="total-price">
				¥{{order.exception}}
			</text>
		</view>
		<view class="bottom">
			<view class="exchange btn" @click="contact" v-if="order.customerTel">
				联系货主
			</view>
			<view class="exchange btn" @click="finish" v-if="order.customerTel">
				结束运输
			</view>
			<view class="exchange btn" @click="deleteOrder" v-else>删除运力发布</view>
		</view>
	</view>
</template>

<script>
	import {getInfoRequest} from '../../../../api/driver/vehicle.js'
	export default{
		props:{
			order:{
				type: Object,
				default() {
					return {}
				}
			}
		},
		filters: {
		    statusOrderFilter(status) {
		      const statusMap = {
		        '0': '正在找单',
				'1': '结束找单',
				'2': '取消找单',
				'3': '已被接单'
		      }
		      return statusMap[status]
		    },
			statusVehicleFilter(status) {
			  const statusMap = {
			    '0': '禁用',
			    '1': '锁定',
			    '2': '审核中',
			    '3': '正在使用',
			    '4': '空闲'
			  }
			  return statusMap[status]
			}
		},
		data() {
			return {
				
			}
		},
		methods:{
			// 删除操作，触发后交给父组件判断
			deleteOrder() {
				this.$emit('deleteCar',this.order.id);
			},
			contact() {
				uni.makePhoneCall({
					phoneNumber: this.order.customerTel //仅为示例
				});
			},
			finish() {
				this.$emit('finish',this.order.id);
			}
		}
	}
</script>

<style lang="scss">
	.vehicle {
		width: 98%;
		background-color: #ffffff;
		margin: 10rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
	
		.top {
			display: flex;
			justify-content: space-between;
	
			.left {
				display: flex;
				align-items: center;
	
				.car-type {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
			.right {
				color: $u-type-info;
			}
	
		}
		
		.u-line{
			height: 10rpx;
		}
		
		.order-item {
			display: flex;
			margin: 20rpx 0 0;
			width: 100%;
			.left {
				margin-right: 20rpx;
				image {
					width: 250rpx;
					height: 250rpx;
					border-radius: 10rpx;
				}
				
				.title-contact {
					flex:  1;
				}
			}
			.content {
				width: 100%;
				text-align: right;
				flex: 2;
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}
	
				.driver-name {
					color: $u-type-warning-disabled;
					font-size: 28rpx;
					line-height: 50rpx;
				}
				
				.create-time {
					color: $u-type-info;
					font-size: 26rpx;
					line-height: 50rpx;
				}
			}
		}
		
		.total {
			margin-top: 20rpx;
			margin-left: 20rpx;
			text-align: left;
			font-size: 30rpx;
			.total-price {
				font-size: 32rpx;
				margin-top: 4rpx;
			}
		}
		.bottom {
			display: flex;
			margin-top: 10rpx;
			padding: 0 10rpx;
			justify-content: flex-end;
			align-items: center;
	
			.btn {
				line-height: 52rpx;
				margin-left: 10rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-type-info-dark;
			}
	
		}
	}
</style>
